import React from "react";
import PropTypes from 'prop-types';
import {Drawer} from "antd";

function ColTypeDrawer(props) {
    const {setDetailTypeShow, setFormN, detailTypeShow} = props;

    return (
        <Drawer
            width={500}
            closable={false}
            onClose={() => setDetailTypeShow(false)}
            placement="right"
            className="detailTypeDrawer"
            visible={detailTypeShow}>
            <h3>显示样式示例</h3>
            <ul>
                <li onClick={() => setFormN('movie_3')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>movie_3</p>
                    <div className="movie movie_3">
                        <div className="movie_box">
                            <div className="movie_cover">
                                <p className="movie_up">图内文字</p>
                            </div>
                            <p className="movie_name">名称</p>
                        </div>
                        <div className="movie_box">
                            <div className="movie_cover">
                                <p className="movie_up">图内文字</p>
                            </div>
                            <p className="movie_name">名称</p>
                        </div>
                        <div className="movie_box">
                            <div className="movie_cover">
                                <p className="movie_up">图内文字</p>
                            </div>
                            <p className="movie_name">名称</p>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('movie_2')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>movie_2</p>
                    <div className="movie movie_3">
                        <div className="movie_box">
                            <div className="movie_cover">
                                <p className="movie_up">图内文字</p>
                            </div>
                            <p className="movie_name">名称</p>
                        </div>
                        <div className="movie_box">
                            <div className="movie_cover">
                                <p className="movie_up">图内文字</p>
                            </div>
                            <p className="movie_name">名称</p>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('movie_1')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>movie_1</p>
                    <div className="movie movie_1">
                        <div className="movie1_box">
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                            <div className="movie_cover">
                            </div>
                        </div>
                        <div className="movie1_box">
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                            <div className="movie_cover">
                            </div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('movie_1_left_pic')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>movie_1_left_pic</p>
                    <div className="movie movie_1">
                        <div className="movie1_box">
                            <div className="movie_cover">
                            </div>
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                        </div>

                        <div className="movie1_box">
                            <div className="movie_cover">
                            </div>
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('movie_1_vertical_pic')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>movie_1_vertical_pic</p>
                    <div className="movie movie_1 movie_1_vertical_pic">
                        <div className="movie1_box">
                            <div className="movie_cover">
                            </div>
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                        </div>

                        <div className="movie1_box">
                            <div className="movie_cover">
                            </div>
                            <div className="left">
                                <p className="movie_name">名称</p>
                                <p className="movie_up">作者：。。。。。。。。</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('text_1')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>text_1</p>
                    <div className="text text_1">
                        <div className="textBox">
                            text1
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('text_center_1')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>text_center_1</p>
                    <div className="text text_center_1">
                        <div className="textBox">
                            text1
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('text_2')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>text_2</p>
                    <div className="text text_2">
                        <div className="textBox">
                            text2
                        </div>
                        <div className="textBox">
                            text2
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('text_3')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>text_3</p>
                    <div className="text text_3">
                        <div className="textBox">
                            text3
                        </div>
                        <div className="textBox">
                            text3
                        </div>
                        <div className="textBox">
                            text3
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('text_4')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>text_4</p>
                    <div className="text text_4">
                        <div className="textBox">
                            text4
                        </div>
                        <div className="textBox">
                            text4
                        </div>
                        <div className="textBox">
                            text4
                        </div>
                        <div className="textBox">
                            text4
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('pic_3')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>pic_3</p>
                    <div className="pic pic_3">
                        <div className="picBox">
                            pic_3
                        </div>
                        <div className="picBox">
                            pic_3
                        </div>
                        <div className="picBox">
                            pic_3
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('pic_2')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>pic_2</p>
                    <div className="pic pic_2">
                        <div className="picBox">
                            pic_2
                        </div>
                        <div className="picBox">
                            pic_2
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('pic_1')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>pic_1</p>
                    <div className="pic pic_1">
                        <div className="picBox">
                            pic_1
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('icon_4')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>icon_4</p>
                    <div className="icon icon_4">
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon4</div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('icon_small_4')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>icon_small_4</p>
                    <div className="icon icon_small icon_small_4">
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_4</div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('icon_small_3')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>icon_small_3</p>
                    <div className="icon icon_small icon_small_3">
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_3</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_3</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_small_3</div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('icon_round_small_4')}>
                    <p className="title" style={{marginLeft: 10}}
                       onClick={() => setDetailTypeShow(true)}>icon_round_small_4</p>
                    <div className="icon icon_small icon_round_small_4">
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_round_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_round_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_round_small_4</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_round_small_4</div>
                        </div>
                    </div>
                </li>
                <li onClick={() => setFormN('icon_2')}>
                    <p className="title" style={{marginLeft: 10}} onClick={() => setDetailTypeShow(true)}>icon_2</p>
                    <div className="icon icon_small icon_2">
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_2</div>
                        </div>
                        <div className="iconBox">
                            <div className="icon_cover"/>
                            <div className="ivon_title">icon_2</div>
                        </div>
                    </div>
                </li>
            </ul>
        </Drawer>
    );
}


ColTypeDrawer.propTypes = {
    setDetailTypeShow: PropTypes.func,
    setFormN: PropTypes.func,
    detailTypeShow: PropTypes.bool
};
export default ColTypeDrawer;
